import React from 'react';
import { View, Text, StyleSheet, Pressable, Image } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import Icon from 'react-native-vector-icons/Ionicons';
import SearchBar from './SearchBar';
import { HeaderSkeletonLoader } from './SkeletonLoader';
import { COLORS } from '../styles/constants';

// 导入自定义图标
const scenicIcon = require('../assets/images/scenic-icon.png');
const mapIcon = require('../assets/images/map-icon.png');

/**
 * 首页头部组件
 * @param {Object} props 组件属性
 * @param {string} props.city 城市名称
 * @param {string} props.cityImage 城市图片URL
 * @param {Object} props.weather 天气信息
 * @param {number} props.scenicAreasCount 景区数量
 * @param {number} props.attractionCount 景点数量
 * @param {Function} props.onLocationPress 位置栏点击回调
 * @param {Function} props.onSearchPress 搜索框点击回调
 * @param {Function} props.onMapPress 地图图标点击回调
 * @returns {JSX.Element} 头部组件
 */
export default function HomeHeader({
  city,
  weather,
  scenicAreasCount,
  attractionCount,
  onLocationPress,
  onSearchPress,
  onMapPress,
}) {
  const insets = useSafeAreaInsets();

  // 如果城市正在加载，显示骨架屏
  if (city === '定位中...') {
    return <HeaderSkeletonLoader />;
  }

  return (
    <View style={[styles.header, { paddingTop: insets.top + 12 }]}>
      {/* 第一行：城市名称 + 天气 + 景区数量 */}
      <View style={styles.topRow}>
        {/* 城市名称 */}
        <Pressable onPress={onLocationPress} style={styles.cityButton} hitSlop={8}>
          <Icon
            name="location"
            size={18}
            color={COLORS.primary}
            style={{ marginRight: 4 }}
          />
          <Text style={styles.cityName} numberOfLines={1}>
            {city}
          </Text>
          <Icon
            name="chevron-down"
            size={14}
            color={COLORS.text.tertiary}
            style={{ marginLeft: 2 }}
          />
        </Pressable>

        {/* 景区数量 */}
        <View style={styles.countCard}>
          <Image source={scenicIcon} style={styles.scenicIcon} />
          <Text style={styles.countText}>
            {scenicAreasCount && scenicAreasCount > 0
              ? scenicAreasCount
              : attractionCount || 0}
            <Text style={styles.countLabel}> 个景区</Text>
          </Text>
        </View>

        {/* 空白填充 */}
        <View style={{ flex: 1 }} />

        {/* 天气信息 */}
        {weather ? (
          <View style={styles.weatherCard}>
            <Text style={styles.weatherIcon}>{weather.icon || '☁️'}</Text>
            <Text style={styles.weatherText}>{Math.round(weather.temp)}° {weather.text}</Text>
          </View>
        ) : (
          <View style={styles.weatherCard}>
            <Text style={styles.weatherPlaceholder}>--</Text>
          </View>
        )}
      </View>

      {/* 搜索框和地图图标 */}
      <View style={styles.searchBarContainer}>
        <View style={styles.searchBarWrapper}>
          <SearchBar
            value={''}
            editable={false}
            placeholder={`搜索${city}景点`}
            onPressIn={onSearchPress}
          />
        </View>
        <Pressable
          style={styles.mapIconButton}
          onPress={onMapPress}
          hitSlop={8}
        >
          <Image source={mapIcon} style={styles.mapIcon} />
        </Pressable>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  header: {
    paddingHorizontal: 16,
    paddingBottom: 16,
    backgroundColor: COLORS.white,
    borderBottomLeftRadius: 20,
    borderBottomRightRadius: 20,
    shadowColor: COLORS.shadow,
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.05,
    shadowRadius: 8,
    elevation: 3,
  },
  // 第一行：城市 + 天气 + 景区
  topRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 14,
    paddingRight: 4, // header 已有 16px，再加 4px = 20px
  },
  cityButton: {
    flexDirection: 'row',
    alignItems: 'center',
    marginRight: 8,
  },
  cityName: {
    fontSize: 16,
    color: COLORS.text.primary,
    fontWeight: '700',
    maxWidth: 100,
  },
  // 天气卡片
  weatherCard: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  weatherIcon: {
    fontSize: 18,
    marginRight: 4,
  },
  weatherText: {
    fontSize: 13,
    fontWeight: '600',
    color: COLORS.text.primary,
  },
  weatherPlaceholder: {
    fontSize: 13,
    color: COLORS.text.quaternary,
  },
  // 景区数量卡片
  countCard: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 10,
    paddingVertical: 6,
    borderRadius: 12,
    backgroundColor: COLORS.primaryLight,
    marginRight: 10,
  },
  countText: {
    fontSize: 13,
    fontWeight: '700',
    color: COLORS.primary,
  },
  countLabel: {
    fontSize: 12,
    color: COLORS.primaryMedium,
    fontWeight: '400',
  },
  scenicIcon: {
    width: 16,
    height: 16,
    marginRight: 4,
    resizeMode: 'contain',
  },
  // 搜索框和地图图标
  searchBarContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  searchBarWrapper: {
    flex: 1,
    marginRight: 12,
  },
  mapIconButton: {
    width: 48,
    height: 48,
    borderRadius: 14,
    justifyContent: 'center',
    alignItems: 'center',
  },
  mapIcon: {
    width: 48,
    height: 48,
    resizeMode: 'contain',
  },
});
